<template>
  <div class="w-full h-[64px] flex justify-start items-center border-bottom">
    <div class="w-[300px] ml-6 flex justify-start items-center">
      <div @click="goBack" class="cursor-pointer">
        <span> <icon-left /> </span>
        <span class="ml-3">查看证书</span>
      </div>
    </div>
  </div>
  <div class="w-full px-6">
    <div class="report-content">
      <div class="report-content-top">
        <div class="report-content-img">
          <img :src="logo" alt="">
        </div>
        <div class="report-content-info">
          <a-row>
            <a-col :span="12">
              <div class="boxItem">
                <span class="title">资产权属方:</span>
                <span class="cont">XXXXXXX</span>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="boxItem">
                <span class="title">申请时间:</span>
                <span class="cont">{{ detailInfo.application_time }}</span>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <div class="boxItem">
                <span class="title">社会统一信用代码:</span>
                <span class="cont">XXXXX</span>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="boxItem">
                <span class="title">登记时间:</span>
                <span class="cont">{{ detailInfo.registration_time }}</span>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <div class="boxItem">
                <span class="title">注册地:</span>
                <span class="cont">{{ detailInfo.certificate_no }}</span>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="boxItem">
                <span class="title">证书编号:</span>
                <span class="cont">{{ detailInfo.certificate_no }}</span>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div class="boxItem">
                <span class="title">证书Hash:</span>
                <span class="cont">{{ detailInfo.certificate_hash }}</span>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="report-content-select">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="证书详情">
            <a-row>
              <a-col :span="6" class="borderStyle">
                <div class="select-left">
                  <div class="info-title">
                    <span class="info-title-select">文件列表</span>
                    <SignUpload style="width: 30px" v-model="modelValue" :file-list="[]" :show="false"
                      file-name-key="file_origin_name" file-path-key="file_path" :extend-props="{
                        accept: '',
                        single: single,
                        startUpload: 'api/asset_registration/file/v2/prepare',
                        uploadPath: 'api/asset_registration/file/v2/upload',
                        mergePath: 'api/asset_registration/file/v2/merge'
                      }" @uploaded="addFiles()">
                      <div class="upload-icon">
                        <IconPlus />
                      </div>
                    </SignUpload>
                  </div>
                  <div class="info-file">
                    <FileList v-model=fileList @viewFile="handleMenuSelect" />
                  </div>
                </div>
              </a-col>
              <a-col :span="17" :offset="1" style="height: calc(100vh - 340px);overflow: auto;">
                <vue-office-docx :src="docx" class="view-h" @rendered="renderedHandler" @error="errorHandler"
                  v-if="isDocx" />
                <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" v-if="isPdf" class="view-h"/>
                <vue-office-excel :src="excel" class="view-h" @rendered="renderedHandler" @error="errorHandler"
                  v-if="isExcel" />
                <img :src="imgUrl" v-if="isImg" />
                <div class="show-default" v-if="!isDocx && !isPdf && !isExcel && !isImg">
                  <img src="@/assets/images/registerManage/empty.png" />
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" title="关联资产">
            <ModuleBlock :checkPermission="['button', '资产管理-资产登记-查看证书-关联资产-查看']" :data="detailInfo.asset_package_data">
            </ModuleBlock>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <div class="common-footer">
      <a-button class="back" @click="goBack">取消</a-button>
      <a-button type="primary" @click="submitForm">确定</a-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import SignUpload from '@/views/file_upload_new/signUpload.vue';
const modelValue = ref('');
import VueOfficeDocx from '@vue-office/docx';
import VueOfficePdf from '@vue-office/pdf';
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/docx/lib/index.css';
import '@vue-office/excel/lib/index.css';
import '@vue-office/docx/lib/index.css';
import ModuleBlock from './components/ModuleBlock.vue';
import FileList from '../components/file_list.vue';
import { Message } from '@arco-design/web-vue';
import {
  registration_detail,
  file_Add,
  file_delete
} from '@/api/resource_registration/resource_registration';
import { useRoute } from 'vue-router';
const route = useRoute();
const detailInfo: any = reactive({
  id: 0,
  name: '',
  number: '',
  owner: '',
  owner_icon: [''],
  registered_address: '',
  registration_time: '',
  application_time: '',
  certificate_hash: '',
  certificate_no: '',
  credit_code: '',
  asset_package_data: [],
  file_data: []
});
const logo = ref('/src/assets/images/registerManage/register_info_img.png');
const docx = ref('');
const excel = ref('');
const pdf = ref('');
const imgUrl = ref('');
const isDocx = ref(false);
const isExcel = ref(false);
const isPdf = ref(false);
const isImg = ref(false);
const single = ref(false);
import conf from '@/config/config';

const fileList = ref([])
const getDownd = (e) => {
  const url = `${conf.getServerUrl()}/api/asset_registration/file/v2/download?file_info=${fileList.value[e].file_info}`;
  console.log(url);
  return url;
};
/**
 * 获取详情信息
 */
const getDetail = () => {
  const params: any = {
    id: route.query.id
  };
  registration_detail(params).then((res) => {
    const { code, data } = res;
    if (code === 200) {
      fileList.value = data.file_data;
      Object.keys(data).forEach((key) => {
        if (Object.prototype.hasOwnProperty.call(detailInfo, key)) {
          detailInfo[key] = data[key];
        }
      });
      if (detailInfo.owner_icon !== null) getDowndown(detailInfo.owner_icon[0]);
    }
  });
};
/**
 *
 * @param file 删除文件
 */
const delFiles = (id: number) => {
  file_delete({ asset_registration_id: detailInfo.id, file_id: id }).then((res: any) => {
    if (res.code === 200) {
      Message.success('文件删除成功');
      getDetail();
    } else {
      Message.error(res.message);
    }
  });
};
// 下载图片
// const getDowndown = (file: string) => {
//   registration_download({ file_name: file }).then((res: any) => {
//     const { code, path } = res;
//     if (code === 200) {
//       logo.value = import.meta.env.VITE_APP_BASE_URL + '/download/' + path;
//     }
//   });
// };
// 下载文件
// const downLoadFiles = (url: string, fileName: string) => {
//   const x = new XMLHttpRequest();
//   x.open('GET', url, true);
//   x.responseType = 'blob';
//   x.onload = function () {
//     const url = window.URL.createObjectURL(x.response);
//     const a = document.createElement('a');
//     a.href = url;
//     a.download = fileName;
//     a.click();
//   };
//   x.send();
// };
/**
 * 下载、删除
 */
const handleSelect = (e: number, type: string) => {
  const id = fileList.value[e].id;
  if (type === '下载') {
    // downLoadFiles(url, name);
    // console.log(fileList.value[e]);
  } else {
    delFiles(id);
  }
};
const ViewUrl = computed(() => {
  return `${conf.getServerUrl()}/api/asset_registration/file/v2/download?file_info=`;
});

const fileTypes = {
  '.xlsx': { variable: excel, flag: isExcel },
  '.docx': { variable: docx, flag: isDocx },
  '.pdf': { variable: pdf, flag: isPdf },
  default: { variable: imgUrl, flag: isImg },
};
/* 查看选择文件 */
const handleMenuSelect = (i: any) => {
  const file_info = fileList.value[i - 1].file_info;
  const url = `${ViewUrl.value}${file_info}`;
  let fileType = Object.keys(fileTypes).find((ext) => file_info.endsWith(ext));
  if (!fileType) {
    fileType = 'default';
  }
  const { variable, flag } = fileTypes[fileType];
  variable.value = url;
  flag.value = true;
  Object.entries(fileTypes).forEach(([ext, { flag }]) => {
    if (ext !== fileType) {
      flag.value = false;
    }
  });
};
// 上传文件成功事件
// const uploadData = (data: any, sha256: string) => {
//   addFiles(data, sha256);
// };
// 添加资产合规文件
const addFiles = () => {
  const params = {
    asset_registration_id: detailInfo.id,
    file_info: modelValue.value
  };
  file_Add(params).then((res) => {
    const { code, message } = res;
    if (code === 200) {
      getDetail();
    } else {
      Message.warning(`${message}`);
    }
  });
};
const renderedHandler = () => {
  console.log('渲染完成');
};
const errorHandler = () => {
  console.log('渲染失败');
};
/**
 * @method 返回
 */
const goBack = () => {
  window.history.go(-1);
};
onMounted(() => {
  getDetail();
});
</script>
<style lang="less" scoped>
.report-content {
  padding-top: 20px;

  &-top {
    display: flex;
    align-items: center;
    background: #f7f9fc;
    padding: 20px;
    border-radius: 8px;
  }

  &-img {
    width: 110px;

    img {
      width: 80px;
    }
  }

  &-info {
    flex: 1;

    .imgBox {
      width: 104px;
      height: 133px;
      margin-right: 20px;
      background: rgba(55, 77, 115, 0.1);
      overflow: hidden;
      border-radius: 8px;

      img {
        width: 100%;
        height: auto;
        border-radius: 8px;
      }
    }

    .boxItem {
      font-size: 14px;
      padding: 5px 0;

      .title {
        line-height: 19px;
        padding-right: 15px;
        color: #A3B0CC;
      }

      .cont {
        line-height: 19px;
        font-weight: 500;
        color: #465a80;
      }
    }
  }

  &-select {
    height: calc(100vh - 305px);
    padding-top: 12px;
  }

  .show-default {
    text-align: center;
    margin-top: calc((100vh - 380px) / 2);

    img {
      width: 80px;
      height: 108px;
      margin: 0 auto;
    }
  }
}

.borderStyle {
  height: calc(100vh - 357px);
  border-right: 1px solid #ebf0fa;
  padding-right: 8px;
  overflow: hidden;
}

.info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;

  &-select {
    color: #394d73;
    font-size: 14px;
    font-weight: bold;
  }
}

.info-file {
  height: calc(100vh - 450px);
  margin-top: 30px;
  padding-bottom: 20px;
  overflow: hidden;

  &-box {
    height: 100%;
    overflow-y: scroll;
  }

  &-icon {
    width: 16px;
    height: 16px;
    background: #999;
  }

  :deep(.arco-menu-icon) {
    margin-left: 6px;
    margin-right: 6px;
  }
}

.upload-icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;

  .arco-icon {
    color: #a3b0cc;
  }
}

:deep(.arco-tabs-content) {
  padding-top: 0;
}

:deep(.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix) {
  left: 0;
}

:deep(.arco-menu-icon-suffix.is-open) {
  transform: rotate(0);
}

:deep(.arco-menu-item) {
  display: flex;
  padding: 0;
}

:deep(.arco-btn-size-medium.arco-btn-only-icon) {
  padding-top: 15px;
}

:deep(.arco-btn-secondary[type='button']) {
  background: transparent;
  border-right: none;
}

:deep(.arco-btn-icon) {
  transform: rotate(90deg);
}

:deep(.arco-menu-vertical .arco-menu-item:not(.arco-menu-has-icon)) {
  &:hover {
    background: rgba(240, 244, 250, 1);
  }
}

:deep(.arco-menu-light .arco-menu-item.arco-menu-selected) {
  background: #e5effe;
}

:deep(.arco-menu-vertical .arco-menu-inline-header.arco-menu-has-icon) {
  &:hover {
    background: #f0f4fa;
  }
}

.border-bottom {
  border-bottom: 1px solid #ebf0fa;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 20px;

  img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }

  .pdf-icon {
    width: 18px;
    height: 16px;
  }

  .title {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .icons {
    width: 15%;
  }
}

.view-h {
  height: 55vh;
}

.sel-text {
  opacity: 0;
}

.common-footer {
  position: fixed;
  left: 220px;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(100vw - 220px);
  height: 64px;
  background: #fff;
  box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
  padding-right: 24px;

  .back {
    margin-right: 12px;
  }
}

.cursor-pointer {
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #394d73;
}
</style>
